

<script setup>
    import { ref } from 'vue'
    const bookList = ref([
      { id : 1, name: '《红楼梦》', author: '曹雪芹' },
      { id : 2, name: '《西游记》', author: '吴承恩' },
      { id : 3, name: '《水浒传》', author: '施耐庵' },
      { id : 4, name: '《三国演义》', author: '罗贯中' }
    ])

    const onDel = (id) => {
      if(window.confirm("确认删除吗？")) {
        bookList.value.splice(id, 1)
      }
      
    }
</script>

<template>
  <h3>比特人的书架</h3>
  <ul>
    <li v-for="item ,index in bookList":key = "item.id">
      <span>{{ item.name }}</span>
      <span>{{ item.author }}</span>
      <button @click="onDel(index)">删除</button>
    </li>
    
  </ul>
</template>

<style>
  #app {
    width: 400px;
    margin: 100px auto;
  }
  ul {
    list-style: none;;
  }
  ul li {
    display: flex;
    justify-content: space-around;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
  }
</style>
